<template>
    <div class="container">
        <el-form class="loginForm" ref="form">
            <div class="title">图书商城后台管理系统</div>
            <el-form-item>
                <div class="loginFormItem">
                    <span>用户名：</span>
                    <el-input placeholder="请输入用户名" type="text" v-model="loginForm.username"></el-input>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="loginFormItem">
                    <span>密码：</span>
                    <el-input placeholder="请输入密码" type="password" v-model="loginForm.password"></el-input>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width: 100%; margin-top: 0.6rem" @click="loginHandler">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import service from "@/utils/request";
import { ElMessage } from "element-plus";
import { userStore } from "@/store/user";
import { reactive } from "vue";
import { useRouter } from "vue-router";

const user = userStore();
const router = useRouter();

const loginForm = reactive({
    username: "",
    password: "",
});

const loginHandler = () => {
    service({
        method: "post",
        url: "/login",
        headers: {
            "Content-Type": "application/json",
        },
        data: {
            username: loginForm.username,
            password: loginForm.password,
            isAdmin: 1,
        },
    }).then(async (res) => {
        // console.log(res.data);
        if (res.data.ok) {
            ElMessage({
                type: "success",
                message: "登录成功",
            });
            user.setToken(res.data.data.token);
            await user.setUserInfo();
            user.setLogin();
            router.push({ name: "home" });
            setTimeout(() => {
                window.location.reload();
            }, 200);
        } else {
            ElMessage({
                type: "error",
                message: res.data.data,
            });
        }
    });
};
</script>

<style lang="scss" scoped>
.container {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(94.3deg, rgba(26, 33, 64, 1) 10.9%, rgba(81, 84, 115, 1) 87.1%);
    overflow: hidden;

    .loginForm {
        position: relative;
        z-index: 3;
        width: 30rem;
        padding: 3rem;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);

        .title {
            color: #fff;
            display: block;
            text-align: center;
            margin-bottom: 2rem;
            font-size: 1.8rem;
        }

        .loginFormItem {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            span {
                flex: 1;
                text-align: end;
            }

            .el-input {
                flex: 4;
                border-radius: 8px;
                background-color: transparent;
                border: 1px solid rgba(255, 255, 255, 0.5);
                color: #fff;
                outline: none;
            }
        }
    }
}

.container::before {
    position: absolute;
    content: "";
    z-index: 2;
    width: 450px;
    height: 450px;
    top: 52%;
    left: 50%;
    transform: translate(-100%, -80%);
    background-color: #ffe53b;
    background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
    animation: pulse 1.5s infinite;
}

.container::after {
    position: absolute;
    content: "";
    z-index: 2;
    width: 300px;
    height: 300px;
    top: 40%;
    left: 60%;
    transform: translate(10%, 20%);
    background-color: #fa8bff;
    background-image: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 52%, #2bff88 90%);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
    animation: pulse 1.6s infinite;
}

@keyframes pulse {
    50% {
        box-shadow: 0 0 0 50px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
</style>
